<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超市订单管理系统</title>
    <link type="text/css" rel="stylesheet" href="../css/style.css"/>
    <link type="text/css" rel="stylesheet" href="../css/public.css"/>
    <link type="text/css" rel="stylesheet" href="../element-ui/index.css">
    <style>
        body {
            background-color: white;
        }

        #data-empty {
            color: gray;
            text-align: center;
            font-size: 20px;
        }
        /*element-ui目前没有参数修改文本居中，通过css设置表格中文本居中*/
        /*也可以一列一列的加属性：align="center"*/
        .el-table td, .el-table th {
            text-align: center;
        }
        .el-row {
            margin: 10px;
        }
    </style>
</head>
<body>
<div id="bill_list">
    <div class="location">
        <strong>你现在所在的位置是:</strong> <span>订单管理页面</span>
    </div>
    <el-row :gutter="10" margin="5px">
        <el-col :span="4">
            <el-input v-model="productName" placeholder="商品名称" clearable></el-input>
        </el-col>
        <el-col :span="4">
            <el-select v-model="providerId" clearable placeholder="供应商">
                <el-option
                        v-for="provider in providerList"
                        :key="provider.id"
                        :label="provider.proName"
                        :value="provider.id">
                </el-option>
            </el-select>
        </el-col>
        <el-col :span="4">
            <el-select v-model="isPayment" clearable placeholder="是否付款">
                <el-option :label="'未付款'" :value="1"></el-option>
                <el-option :label="'已付款'" :value="2"></el-option>
            </el-select>
        </el-col>
        <el-col :span="8">
            <el-button type="primary" icon="el-icon-search" @click="searchBill">查询</el-button>
        </el-col>
        <el-col :span="4">
            <el-button type="primary" icon="el-icon-circle-plus-outline" @click="addInfo">添加订单</el-button>
        </el-col>
    </el-row>


    <!--账单表格 样式和供应商公用-->
    <el-table
            :data="billList"
            stripe
            border
            style="width: 100%"
            size="mini"
            >
        <el-table-column label="封面" width="80px">
            <template slot-scope="scope">
                <el-image
                        style="height:60px; width:60px"
                        v-bind:src="scope.row.img != null && scope.row.img !='' ?  '../upload/' + scope.row.img :'../images/default.png'"
                ></el-image>
            </template>
        </el-table-column>
        <el-table-column prop="billCode" label="订单编号" ></el-table-column>
        <el-table-column prop="productName" label="商品名称"></el-table-column>
        <el-table-column prop="proName" label="供应商" width="200px"></el-table-column>
        <el-table-column prop="totalPrice" label="订单金额" align="center"></el-table-column>
        <el-table-column prop="isPayment" label="是否付款">
            <template slot-scope="scope">
                {{scope.row.isPayment == 1 ? "未付款" : "已付款"}}
            </template>
        </el-table-column>
        <el-table-column prop="creationDate" label="创建时间"></el-table-column>
        <el-table-column prop="id" label="操作" width="215px" align="center">
            <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-edit" size="mini" @click="updInfo(scope.row.id)">修改</el-button>
                <el-button type="danger" icon="el-icon-delete" size="mini" @click="delInfo(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination :current-page="page"
                   :page-size="size"
                   :total="count"
                   layout="total, prev, pager, next, jumper"
                   @current-change="change">
    </el-pagination>

    <el-dialog
            title="提示"
            :visible.sync="isDel"
            width="30%"
            top="20%">
        <span>确定删除该订单吗？</span>
        <span slot="footer" class="dialog-footer">
    <el-button @click="isDel = false">取 消</el-button>
    <el-button type="primary" @click="delBill">确 定</el-button>
  </span>
    </el-dialog>

</div>

<script src="../js/vue.js"></script>
<script src="../js/axios.min.js"></script>
<!--element-ui是依赖于vue的，所以得先引入vue.js-->
<script src="../element-ui/index.js"></script>
<script>
    var vue = new Vue({
        el: "#bill_list",
        data: {
            billList: [], //订单列表
            providerList: [], //供应商列表
            count: 0, //总数
            page: 1, //当前页数
            size: 5, //每页行数
            totalPage: 0, //总页数
            productName: "", //订单名字
            providerId: "", //供应商ID
            isPayment: "", //是否付款
            isDel: false, //删除页面显示标识
            delId:"", //要删除的订单ID
        },
        created() {
            //加载供应商列表
            this.loadData_providers();
            //加载供应商列表
            this.loadData_bills();
        },
        methods: {
            //加载供应商下拉列表
            loadData_providers() {
                var url = "../provider/findAll";
                axios.get(url)
                    .then(response => {
                        this.providerList = response.data.data;
                    })
                    .catch(error => {
                        console.log(error);
                    })
            },

            //加载订单列表
            loadData_bills() {
                var url = "../bill/findPage/" + this.page + "/" + this.size;
                var data = {
                    "productName": this.productName,
                    "providerId": this.providerId,
                    "isPayment": this.isPayment,
                }
                axios.get(url, {params: data})
                    .then(response => {
                        //获取订单列表
                        this.billList = response.data.data.list;
                        //获取总行数
                        this.count = response.data.data.count;
                        //计算总页数
                        this.totalPage = Math.ceil(this.count / this.size);
                    })
                    .catch(error => {
                        console.log(error);
                    })
            },

            //切换页码
            change(page) {
                this.page = page;
                //重新加载订单列表
                this.loadData_bills()
            },

            //条件查询
            searchBill() {
                //查询从第一页开始
                this.page = 1;
                //重新加载用户列表
                this.loadData_bills();
            },

            //删除订单提示
            delInfo(id) {
                this.isDel = true;
                this.delId = id;
            },

            //删除订单
            delBill(){
                this.isDel = false;
                axios.get("../bill/delBill?id="+this.delId)
                    .then(response => {
                        if(response.data.flag){
                            //这是简洁写法
                            this.$message.success(response.data.msg);
                            //删除成功，页码>1, 并且当前页面只有一行数据，去上一页
                            var length = document.getElementsByClassName("el-table__row").length;
                            if(this.page > 1 && length == 1){
                                this.page--;
                            }
                            this.loadData_bills();
                        }
                    })
                    .catch(error => {
                        this.$message.error(error.msg);
                    })
            },
            //显示添加页面
            addInfo(){
                location.href = "bill_add.html";
            },
            //显示修改页面
            updInfo(id){
                location.href = "bill_update.html";
                sessionStorage.id = id;
            },
        }
    })
</script>
</body>
</html>